<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>前锋图书馆</title>
	<link rel="stylesheet" type="text/css" href="/css/index1.css">
	<link rel="stylesheet" type="text/css" href="/css/base.css" />
	<style type="text/css">
		.page_control_container{margin-top: 140px;}
		.pagination{width: 1250px;padding-top: 30px !important;margin:0 auto;padding-left: 40%;box-sizing: border-box;}
		.pagination1{width: 1250px;padding-top: 30px !important;margin:0 auto;padding-left: 40%;box-sizing: border-box;}
		.pagination2{width: 1250px;padding-top: 30px !important;margin:0 auto;padding-left: 40%;box-sizing: border-box;}

		.headerWrap{width: 100%;height: 33px;background-color: #F7F7F7;}
		.header{width: 1250px;height: 100%;margin: 0 auto;}
		.logoimg{float: left;padding-top: 7px;}
		.logoimg i{float: left;width: 18px;height: 18px;margin-right: 4px;background-position: 0 0;}
		.sprite{background-image: url("/img/index.png");}
		i{display: block;}
		.headerright{float: right;margin-right: 20px;}
		.headercon{float: left;padding: 6px 20px 0px;font-size: 15px;cursor: pointer;}
		.headercon:hover{color: #D61A0B;}
		.headerright li{display: inline-block!important;}
		.navWrap{width: 100%;height: 50px;background-color: #fff;border-bottom: 1px solid #E7E7E7;}
		.nav{width: 1250px;height: 100%;margin: 0 auto;line-height: 50px;}
		.navli{float: left;margin-right: 50px;}
		.navli i{width: 100%;}
		.navlicon{font-size: 15px;}
		.navli:hover{border-bottom: 2px solid #D61A0B;cursor: pointer;}
		.navlicon:hover{color: #D61A0B;cursor: pointer;}
		.navline{width: 0;height: 2px;position: absolute;left: 0;bottom: 0;background-color: #C7332E;}
		.searchbox{width: 280px;height: 32px;float: right;margin-top: 9px;box-sizing: border-box;border: 1px solid #eaeaea;border-radius: 20px;    background-color: #f5f5f5;position: relative;overflow: hidden;margin-right: 40px;}
		.search{width: 230px;height: 30px;line-height: 30px;font-size: 14px;color: #333;position: absolute;left: 0;top: 1px;background-color: #f5f5f5;
    box-sizing: border-box;padding: 0 0 0 15px;}
    	.search_icon_container{width: 50px;height: 30px;position: absolute;right: 0;top: 1px;cursor: pointer;}
    	.search_icon{width: 14px;height: 14px;background-repeat: no-repeat;background-position: -60px -50px;margin: 7px auto;}
    	.shownav{border-bottom: 2px solid #D61A0B;}
    	.shownavli{color: #D61A0B;}
	</style>
</head>
<body>
	<div class="big">
	<!-- 头部 -->
  		<!-- title部分 -->
		<div class="title">
			<div class="headerWrap">
				<div class="header">
					<div class="logoimg">
						<i class="sprite"></i>
						<a href="/index/index/index"><span class="headerLogoCon">前锋图书馆</span></a>
					</div>
					<div class="headerright">
						<div class="headercon">您好！{$uname|default='请登录'}</div>
						<!-- <div class="headercon applyrule">借阅规则</div> -->
						<a href="/index/personalcenter/editpassword"><div class="headercon">修改密码</div></a>
						<a href="/index/index/logout"><div class="headercon">退出登录</div></a>
					</div>
				</div>
			</div>
			<div class="navWrap">
				<div class="nav">
					<div class="navli shownav">
						<div class="navlicon shownavli">拥有书籍</div>
						<!-- <i class="navline"></i> -->
					</div>
					<div class="navli">
						<div class="navlicon">预约书籍或申请借阅</div>
						<!-- <i class="navline"></i> -->
					</div>
					<div class="navli">
						<div class="navlicon">借阅记录</div>
						<!-- <i class="navline"></i> -->
					</div>
					<!-- <div class="searchbox">
						<input type="text" name="" class="search" id="bname" placeholder=" 请输入书籍名称">
						<div class="search_icon_container">
							<div class="search_icon sprite" title="搜索"></div>
						</div>
					</div> -->
				</div>
			</div>
		</div>
		
		<!-- list部分 -->
		<div class="list">
			
			<div class="shangyan">
				<!-- <div class="shang_title">
					<div class="librarybooks contentTitle checked"><span class="contentTiltleinfo">拥有书籍</span></div>
					<div class="lendbooks contentTitle"><span class="contentTiltleinfo">预约书籍或申请借阅</span></div>
					<div class="overdue contentTitle"><span class="contentTiltleinfo">借阅记录</span></div>
				</div> -->
				<div class="shang_content">
					<div class="content">
					</div>
				</div>
				<div class="shang_content shang_content1 hidden">
					<div class="content1">
					</div>
				</div>
				<div class="shang_content shang_content2 hidden">
					<div class="content2">
					</div>
				</div>
				<div class="page_control_container">
					<div class="page_control">
						<div class="pagination hidden"></div>
						<div class="pagination1 hidden"></div>
						<div class="pagination2 hidden"></div>
					</div>
				</div>
		</div>


		<!-- 底部 -->
		<div class="floor">
			<div class="floor_min">
				<div class="floor_min_bottom">
					<span style="display: inline-block;margin: 0 auto;">&copy;前锋图书管理系统</span>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="/js/jquery.js"></script>
<script src="/js/layer/layer.js"></script>
<script src="/js/jquery.paging.js"></script>
<script type="text/javascript">
	$(function(){
		var tabBtnNum=0;
		$(".navli").click(function(){
			tabBtnNum=$(this).index();
			$(".shang_content").addClass('hidden');
			$(".shang_content").eq(tabBtnNum).removeClass('hidden');
			$(".navli").removeClass('shownav');
			$(".navli").eq(tabBtnNum).addClass('shownav');
			if(tabBtnNum==0){
				$(".pagination").empty();
				$(".pagination1").empty();
				$(".pagination2").empty();
				$(".pagination1").hide();
				$(".pagination2").hide();
				page();
			}else if(tabBtnNum==1){
				$(".pagination").empty();
				$(".pagination1").empty();
				$(".pagination2").empty();
				$(".pagination").hide();
				$(".pagination2").hide();
				page1();
			}else if(tabBtnNum==2){
				$(".pagination").empty();
				$(".pagination1").empty();
				$(".pagination2").empty();
				$(".pagination").hide();
				$(".pagination1").hide();
				page2();
			}
		});


		

	$(function(){
		page();
	})

	function page(){
		$('.pagination').paging({
	    total: '',
	    currentPage: '',
	    showPage: 5,        //显示的页数
	    animation: false,
	    showJump: false,
	    ajaxSubmitType: 'post',
	    simpleType: 1,
	    url: '/index/Personalcenter/pageBookRecord',
	    idParameter: "page",
	    ajaxData: {'pageType': 1},
	    beforeAjaxSubmit: function () {
	        PageAPI.AddAjaxData({"pageSize": $(".pageSize").val()});
	    },
	    ajaxSubmitBack: function (data) {
	        console.log(data);
	        $('.content').empty();
	        var orderinfo = data.data;
	        if(orderinfo=='' ||orderinfo==undefined){
	            $(".content").html(' <h2 style="text-align: center;padding-top:120px;height: 166px;color: red;background-color:#fff;">暂无数据</h2>');
	            $(".pagination").hide();
	        }else{
	            $(".pagination").show();
	            var infohtml="";
	             $(orderinfo).each(function (i, val) {
		            infohtml += '<input type="hidden" name="" value="'+val.id+'" class="reading">'
					infohtml += '<div class="booksWrap">'
					if (val.img) {
						infohtml += '<div class="booksImg"><img src="'+val.img+'" class="shang"></div>'	
					}else{
						infohtml += '<div class="booksImg"><img src="/img/default_img.jpg" class="shang"></div>'
					}
					infohtml += '<div class="booksName">'
					infohtml += '<span class="bookNameinfo" title="《'+val.name+'》">《'+val.name+'》</span>'
					infohtml += '</div>'
					infohtml += '<div class="booksTime">'
					infohtml += '<span class="booksTimeinfo">借阅时间：'+val.booktime+'-'+val.expectedReturnTime+'</span>'
					infohtml += '</div>'
					if (val.overtime > 0) {
						infohtml += '<div class="booksName">'
						infohtml += '<span class="bookNameinfo">逾期时间：'+val.overtime+'天</span>'
						infohtml += '</div>'
					}else{
						infohtml += '<div class="booksName">'
						infohtml += '<span class="bookNameinfo">逾期时间：未逾期</span>'
						infohtml += '</div>'
					}
					if (val.states == 1) {
						infohtml += '<div class="applyBtn">'
						infohtml += '<span class="applyBtninfo">申请归还</span>'
						infohtml += '</div>'
					}else if(val.states == 5){
						infohtml += '<div class="applyBtn">'
						infohtml += '<span class="applyBtninfo">再次申请归还</span>'
						infohtml += '</div>'
					}else if(val.states == 6){
						infohtml += '<div class="applyBtns applyBtnafter unchecked">'
						infohtml += '<span class="applyBtninfo applyBtninfoafter">正在归还</span>'
						infohtml += '</div>'
					}
					infohtml += '</div>'
				});
				$('.content').append(infohtml);
				var info = '<div class="clearfloat"></div>';
				$('.content').append(info);
	        }
	    },
	    ajaxFormatBack: function (data) {
	        data.total = data.totalpage;
	        data.currentPage = data.currentPage;
	    }
	});
}
	

	function page1(){
		$('.pagination1').paging({
	    total: '',
	    currentPage: '',
	    showPage: 5,        //显示的页数
	    animation: false,
	    showJump: false,
	    ajaxSubmitType: 'post',
	    simpleType: 1,
	    url: '/index/Personalcenter/pageBookcancel',
	    idParameter: "page",
	    ajaxData: {'pageType': 2},
	    beforeAjaxSubmit: function () {
	        PageAPI.AddAjaxData({"pageSize": $(".pageSize").val()});
	    },
	    ajaxSubmitBack: function (data) {
	        console.log(data);
	        $('.content1').empty();
	        var orderinfo = data.data;
	        if(orderinfo=='' ||orderinfo==undefined){
	            $(".content1").html(' <h2 style="text-align: center;padding-top:120px;height: 166px;color: red;background-color:#fff;">暂无数据</h2>');
	            $(".pagination1").hide();
	        }else{
	            $(".pagination1").show();
	            var infohtml="";
	             $(orderinfo).each(function (i, val) {
						infohtml += '<div class="booksWrap1">'
						infohtml += '<div class="booksImg1"><img src="'+val.img+'" class="shang"></div>'
						infohtml += '<div class="booksName1">'
						infohtml += '<span class="bookNameinfo1" title="《'+val.name+'》">《'+val.name+'》</span>'
						infohtml += '</div>'
						infohtml += '<div class="booksTime1">'
						infohtml += '<span class="booksTimeinfo1">预约时间：'+val.applybooktime+'</span>'
						infohtml += '</div>'
						if (val.states==8) {
							infohtml += '<div class="applyBtn1 applyreturn">'
							infohtml += '<input type="hidden" name="" class="cancelapply" value="'+val.id+'">'
							infohtml += '<span class="applyBtninfo1">取消预约</span>'
							infohtml += '</div>'
						}else if (val.states==3) {
							infohtml += '<div class="applyBtn1 applyreturn1">'
							infohtml += '<input type="hidden" name="" class="cancelapply" value="'+val.id+'">'
							infohtml += '<span class="applyBtninfo1">取消借阅</span>'
							infohtml += '</div>'
						}else if (val.states==2) {
							infohtml += '<div class="applyBtn1 applyreturn2">'
							infohtml += '<input type="hidden" name="" class="cancelapply" value="'+val.id+'">'
							infohtml += '<span class="applyBtninfo1">再次申请借阅</span>'
							infohtml += '</div>'
						}
						infohtml += '</div>'
				});
				$('.content1').append(infohtml);
				var info = '<div class="clearfloat"></div>';
				$('.content1').append(info);
	        }
	    },
	    ajaxFormatBack: function (data) {
	        data.total = data.totalpage;
	        data.currentPage = data.currentPage;
	    	}
		})
	}
	function page2(){
		$('.pagination2').paging({
	    total: '',
	    currentPage: '',
	    showPage: 5,        //显示的页数
	    animation: false,
	    showJump: false,
	    ajaxSubmitType: 'post',
	    simpleType: 1,
	    url: '/index/Personalcenter/pageBooklist',
	    idParameter: "page",
	    ajaxData: {'pageType': 3},
	    beforeAjaxSubmit: function () {
	        PageAPI.AddAjaxData({"pageSize": $(".pageSize").val()});
	    },
	    ajaxSubmitBack: function (data) {
	        console.log(data);
	        $('.content2').empty();
	        var orderinfo = data.data;
	        if(orderinfo=='' ||orderinfo==undefined){
	            $(".content2").html(' <h2 style="text-align: center;padding-top:120px;height: 166px;color: red;background-color:#fff;">暂无数据</h2>');
	            $(".pagination2").hide();
	        }else{
	            $(".pagination2").show();
	            var infohtml="";
	             $(orderinfo).each(function (i, val) {
					infohtml += '<div class="booksWrap2">'
					infohtml += '<div class="booksImg2"><img src="'+val.img+'" class="shang"></div>'
					infohtml += '<div class="booksName2">'
					infohtml += '<span class="bookNameinfo2" title="《'+val.name+'》">《'+val.name+'》</span>'
					infohtml += '</div>'
					infohtml += '<div class="booksTime2">'
					infohtml += '<span class="booksTimeinfo2">借阅时间：'+val.booktime+'-'+val.expectedReturnTime+'</span>'
					infohtml += '</div>'
					if (val.returntime != '1970/01/01') {
						infohtml += '<div class="booksName2">'
						infohtml += '<span class="bookNameinfo2">归还时间：'+val.returntime+'</span>'
						infohtml += '</div>'
					}else{
						infohtml += '<div class="booksName2">'
						infohtml += '<span class="bookNameinfo2">归还时间：未归还</span>'
						infohtml += '</div>'
					}
					
					if (val.overtime > 0) {
						infohtml += '<div class="booksName2">'
						infohtml += '<span class="bookNameinfo2">逾期时间：<span calss="checked">'+val.overtime+'天</span></span>'
						infohtml += '</div>'
					}else{
						infohtml += '<div class="booksName2">'
						infohtml += '<span class="bookNameinfo2">逾期时间：<span class="chekced">未逾期</span></span>'
						infohtml += '</div>'
					}
					infohtml += '</div>'
				});
				$('.content2').append(infohtml);
				var info = '<div class="clearfloat"></div>';
				$('.content2').append(info);
	        }
	    },
	    ajaxFormatBack: function (data) {
	        data.total = data.totalpage;
	        data.currentPage = data.currentPage;
	    }
	})	
	};


	


	//取消预约
	var cancelapplyNum;
	$(".content1").on('click','.applyreturn',function(){
		// alert(123);
		cancelapplyNum = $(this).index('.applyreturn');
		var id = $('.cancelapply').eq(cancelapplyNum).val();
		var index = layer.load(1, {
            shade: [0.1, '#fff']
        });
		$.ajax({
        type: "POST",
        url: "/index/Personalcenter/cancelapply",
        data: {'id': id},
        dataType: "json",
        timeout: 3000,
        success: function (data) {
            layer.close(index);
            console.log(data)
            if(data>=1){
                layer.msg('取消成功！', {
                    icon: 1,
                    time: 1000
                }, function () {
                    location.reload();
                });
            }else{
               layer.alert(data.msg, {icon: 2}, function () {
                layer.closeAll();
            });   
           }
       }
   });
});

	

	//取消申请
	var bnums;
	$(".content1").on('click','.applyreturn1',function(){
		
		bnums = $(this).index('.applyreturn1');
		// alert(bnums);
		var id = $(this).find('input').val();
		// alert(id);
		$.ajax({
	        type: "POST",
	        url: "/index/Personalcenter/cancelapplys",
	        data: {'id': id},
	        dataType: "json",
	        timeout: 3000,
	        success: function (data) {
	            console.log(data)
	            if(data==1){
	                layer.msg('取消成功！', {
	                    icon: 1,
	                    time: 1000
	                }, function () {
	                	// $('.content1').eq(bnums).find('.booksWrap1').remove();
	                	location.reload();
	                });
	            }else{
	                layer.msg('取消失败！', {
	                    icon: 2,
	                    time: 1000
	                });  
	            }
	        }
	    });
	})


	//再次申请借阅
	var againnum;
	$(".content1").on('click','.applyreturn2',function(){
		againnum = $(this).index('.applyreturn2');
		// alert(bnum);
		var id = $(this).find('input').val();
		// alert(bookid);
		$.ajax({
			type: "POST",
			url: "/index/Personalcenter/againapplyread",
			data: {'id': id},
			dataType: "json",
			timeout: 3000,
			success: function (data) {
				console.log(data)
				if(data==1){
				    layer.msg('已申请！', {
				        icon: 1,
				        time: 1000
				    }, function () {
				    	var bhtml = '';
				    	bhtml += '<div class="applyBtn1 applyreturn1">';
						bhtml += '<input type="hidden" name="" class="cancelapply" value="'+id+'">';
						bhtml += '<span class="applyBtninfo1">取消借阅</span>';
						bhtml += '</div>';
				        $(".applyreturn2").eq(againnum).replaceWith(bhtml);
				    });
				}else{
				    layer.msg('申请失败！', {
				        icon: 2,
				        time: 1000
				    });  
				}
			}
		});
	})




	//归还申请
	var applyNum;
	$('.content').on('click','.applyBtn',function(){
		applyNum = $(this).index('.applyBtn');
		var id = $('.reading').eq(applyNum).val();
		var index = layer.load(1, {
            shade: [0.1, '#fff']
        });
		$.ajax({
	        type: "POST",
	        url: "/index/Personalcenter/applyrollback",
	        data: {'id': id},
	        dataType: "json",
	        timeout: 3000,
	        success: function (data) {
	            layer.close(index);
	            console.log(data)
	            if(data>=1){
	                layer.msg('申请已提交，请等待处理！', {
	                    icon: 1,
	                    time: 1000
	                }, function () {
	                    $('.applyBtn').eq(applyNum).addClass('applyBtnafter');
	                    $('.applyBtninfo').eq(applyNum).addClass('applyBtninfoafter');
	                    $('.applyBtn').eq(applyNum).addClass('unchecked');
	                    $('.applyBtninfo').eq(applyNum).text('正在处理');
	                });
	            }else{
	                layer.alert(data.msg, {icon: 2}, function () {
	                layer.closeAll();
	            	});   
	            }
	        }
  		});
	});

})
</script>
</html>